<template>
	<view>
		<view class="shoppingList-wrap" v-for="(item,index) in goodList" :key="index">
			<view class="top" @click="clickH(item.id,index)">
				<view class="checkbox" v-show="isEdit">
					<u-checkbox :value="item.isSelect" shape="circle" @tap.stop="changeSelect(index)"></u-checkbox>
				</view>
				<view class="image">
					<u-image width="150rpx" height="150rpx" :src="item.image"></u-image>
					<image src="../../static/images/accPush.png" class="push" v-show="item.isRecommend==1"></image>
					<image src="../../static/images/isBest.png" class="best" v-show="item.isBest"></image>
				</view>
				<view class="name-wrap">
					<view class="text-name marginB10">{{item.storeName}}</view>
					<view class="text-Number marginB10">{{item.keyword}}</view>
					<view class="selling-price marginB10">
						<view v-if="item.isEurope!=1">{{$t("goods.supplyPrice")}}:￥{{item.cost}}</view> <!-- 供货价 -->
						<view class="ln-price">{{$t("goods.sellingPrice")}}: ￥<text
								class="priceText">{{item.price}}</text></view> <!-- 售价 -->
					</view>
					<view class="ln-price marginB10" v-show="item.isEurope!=1">
						<!-- 成交价: ￥<text class="priceText">{{(Number(item.price)+Number(item.taxAndSecondPrice)).toFixed(2)}}</text> -->
						{{$t("goods.expectedEarnings")}}:<text
							:class="Number(item.price)-Number(item.cost)>=0?'income':'nocome'">￥{{(Number(item.price)-Number(item.cost)).toFixed(2)}}</text>
					</view>
					<view class="operation">
						<!-- <view>预计收益: <text :class="Number(item.price)-Number(item.cost)>=0?'income':'nocome'">￥{{(Number(item.price)-Number(item.cost)).toFixed(2)}}</text></view> -->
						<!-- <view v-else style="padding: 0rpx 120rpx"></view> -->
						<view class="temp">
							<block v-for="(option,optionIndex) in iconList" :key="optionIndex"
								v-if="item.tempId == option.id">
								<image :src="`../../static/images/${option.site}.png`" class="shipadd"
									:class="option.site"></image>
								<text class="tempName">{{$t(`publicLang.${option.name}`)}}</text>
							</block>
						</view>
						<view class="operation-button" @tap.stop="update(item,index)" :class="{'left':item.isBest}">
							<block v-if="!item.isBest">
								<text class="iconfont iconadd-product"></text>
								<text>{{$t("goods.recommend")}}</text>
							</block>
							<block v-else>
								<text class="iconfont icona-quxiaotuijian1"></text>
								<text>{{$t("goods.cancelRecommendation")}}</text>
							</block>
							<!-- <u-icon name="rmb-circle" class="u-icon-class"></u-icon>设置价格 -->
						</view>
						<view class="operation-button" @tap.stop="changeGoodsShell(item.id,index)">
							<view v-if="current!=0" class="operation-btn">
								<!-- <image class="btn-image" src="../../static/images/putShelf.png"></image>上架 -->
								<text class="iconfont icona-shangjia1"></text>{{$t("goods.onTheShelf")}}
							</view>
							<view v-else class="operation-btn">
								<!-- <image class="btn-image" src="../../static/images/offShelf.png"></image>下架 -->
								<text class="iconfont icona-xiajia1"></text>{{$t("goods.takeDown")}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "store-goods",
		computed: mapGetters(["iconList"]),
		data() {
			return {};
		},
		props: {
			current: Number,
			goodList: {
				type: Array,
				default () {
					return [];
				},
			},
			isEdit: {
				type: Boolean,
				default () {
					return false;
				},
			},
		},
		methods: {
			clickH(id, index) {
				if (this.isEdit) {
					this.$emit("selected", index);
				} else {
					this.$emit("goodsDetail", id);
				}
			},
			changeSelect(index) {
				this.$emit("selected", index);
			},
			// 上下架
			changeGoodsShell(id, index) {
				if (this.isEdit) {
					this.$emit("selected", index);
				} else {
					var _this = this;
					uni.showModal({
						title: "提示",
						content: `确认${this.current == 0 ? "下架" : "上架"}该商品`,
						cancelText:_this.$t('publicLang.cancel'),
						confirmText: _this.$t('publicLang.sure'),
						success: function(res) {
							if (res.confirm) {
								_this.$emit("putShell", id);
							}
						},
					});
				}
			},
			update(row, index) {
				console.log(row, this.isEdit);
				if (this.isEdit) {
					this.$emit("selected", index);
				} else {
					this.$emit("onchangeIsBest", row);
				}
			},
		},
	};
</script>

<style lang="scss">
	.shoppingList-wrap {
		background-color: #ffffff;
		border-bottom: 1px solid #f5f5f5;
	}

	.top {
		overflow: hidden;
		display: flex;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}

	.top .image {
		margin: 0 20rpx;
		width: 160rpx;
		height: 160rpx;
		padding: 5rpx;
		border: 1rpx solid #f5f5f5;
		position: relative;
	}

	.top .image .pic {
		width: 150rpx;
		height: 150rpx;
	}

	.top .image .push {
		width: 90rpx;
		height: 30rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.top .image .best {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.name-wrap {
		display: flex;
		flex-direction: column;
		// width: 250rpx;
		margin-left: 10rpx;
		flex: 1;
		font-size: 26rpx;

		.text-name {
			width: 400rpx;
			overflow: hidden;
			white-space: normal;
			text-overflow: ellipsis;
			display: -webkit-box;
			word-wrap: break-word;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		.text-Number {
			width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.7);
			align-items: center;
		}

		.selling-price {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.ln-price {
			font-weight: bold;

			.priceText {
				font-size: 32rpx;
			}
		}

		.operation {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.u-icon-class {
				margin-right: 6rpx;
			}

			.shipadd {
				width: 24rpx;
				height: 24rpx;
				vertical-align: middle;
				margin-right: 6rpx;
			}

			.temp {
				width: 180rpx;
				font-size: 22rpx;

				.tempName {
					vertical-align: middle;
				}
			}

			.operation-button {
				font-size: 20rpx;
				font-weight: bold;

				.iconfont {
					font-size: 28rpx;
					margin-right: 8rpx;
				}

				.operation-btn {
					display: flex;
					justify-content: center;

					.btn-image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 4rpx;
					}
				}
			}

			.left {
				margin-left: 40rpx;
			}
		}
	}

	.checkbox {
		display: flex;
		align-items: center;
		width: 30rpx;
		height: 160rpx;
	}

	.marginB10 {
		margin-bottom: 10rpx;

		.income {
			color: #ff0000;
		}

		.nocome {
			color: green;
		}
	}
</style>
